<template>
    <SearchForm :FormConfig :FormValue="VersionStore.searchForm" />

    <a-card>
        <a-spin :spinning="VersionStore.loading">
            <a-table :scroll bordered :pagination="VersionStore.searchForm" :columns
                :dataSource="VersionStore.tableData" @change="">
                <template #bodyCell="{ text, record, index, column }">
                    <template v-if="column.dataIndex === 'action'">
                        <div>
                            <a-popconfirm title="此操作不可逆，是否继续？" ok-text="确定" cancel-text="取消"
                                @confirm="VersionStore.delVersion(record.id)" @cancel="EventBus.emit('CancleInfo')">
                                <Btn permission="delete" type="link">删除</Btn>
                            </a-popconfirm>
                        </div>
                    </template>
                </template>
            </a-table>
        </a-spin>
    </a-card>

    <ModalForm ref="addFormRef" title="上传" :okFn="VersionStore.addVersion" :FormConfig="addFormConfig"
        :FormValue="VersionStore.addForm" :rules="FormRules" />

    <div class="progressBox" v-if="VersionStore.showProgress">
        <a-progress stroke-linecap="square" type="circle" trailColor="#f0f0f0" :percent="VersionStore.progressLong">
            <template #format="percent">
                <span style="color: #fff">{{ percent }}%</span>
            </template>
        </a-progress>
        <p>正在上传，请稍后</p>
    </div>


</template>
<script lang='ts' setup>
import { searchConfig, addConfig, columns } from '@/config/Version';
import { createForm } from '@/utils/CreateForm';
import { createBtns } from '@/utils/createPermissionBtns';
import { provide, ref } from 'vue';
import { useVersion } from '@/stores/Version';
import { useTableScroll } from '@/utils/GetTableScroll';
import EventBus from '@/utils/EventBus';
import { debounce } from 'lodash';

const VersionStore = useVersion()
const { FormConfig } = new createForm(searchConfig, { labelCol: { span: 5 }, layout: 'inline', labelAlign: 'right' })
const { FormConfig: addFormConfig, FormRules } = new createForm(addConfig)


const scroll = useTableScroll('searchCard')
const addFormRef = ref()


VersionStore.getVersion()




provide('permissionBtns', createBtns({
    query: debounce(() => {
        VersionStore.getVersion()
    }, 1000),
    add: () => { addFormRef.value.open = true; }
}))

</script>
<style lang='scss' scoped>
.progressBox {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    p {
        margin-top: 20px;
        color: #fff;
        font-size: 20px;
        font-weight: 600;
    }
}
</style>